<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="state.collapsed" collapsible>
      <div class="logo" style="height: 55px" />
      <a-menu
        v-model:selectedKeys="state.selectedKeys"
        theme="dark"
        mode="inline"
        @click="nvrRouter"
      >
        <a-menu-item
          v-for="nvr in navData"
          :key="nvr.key"
          :title="nvr.title"
          :path="nvr.path"
        >
          <component :is="nvr.icon"></component>
          <span>{{ nvr.title }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout style="flex-direction: column">
      <a-layout-header style="background: #fff; padding: 0; text-align: left"
        ><Header
          @toggleCollapsed="toggleCollapsed"
          :collapsed="state.collapsed"
      /></a-layout-header>

      <a-layout-content style="margin: 0 16px">
        <div
          :style="{
            padding: '10px',
            background: '#fff',
            minHeight: '360px',
            marginTop: '20px',
          }"
        >
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        CopyRight © 版权所有: 郑州三和视讯技术股份有限公司
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import {
  DashboardOutlined,
  DesktopOutlined,
  ProfileOutlined,
  DatabaseOutlined,
} from "@ant-design/icons-vue";
import Header from "../components/Header.vue";
import { useRoute, useRouter } from "vue-router";
let route = useRoute();
let router = useRouter();

onMounted(() => {
  let aa = navData.filter((item) => item.path == route.path.replace("/", ""));
  state.selectedKeys = [aa[0].key] || ["2"];
});
const state = reactive({
  collapsed: false,
  selectedKeys: ["1"],
});
const navData = [
  {
    key: "1",
    path: "systemmonitor",
    title: "系统监控",
    icon: DashboardOutlined,
  },
  {
    key: "2",
    path: "systemconfig",
    title: "系统配置",
    icon: DesktopOutlined,
  },
  {
    key: "3",
    path: "SvgVue",
    title: "系统管理",
    icon: ProfileOutlined,
  },
  {
    key: "4",
    path: "systemmonitor",
    title: "系统数据",
    icon: DatabaseOutlined,
  },
];

const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
};
const nvrRouter = ({ item }) => {
  router.push({ path: item.path });
};
</script>

<style lang="less" scoped></style>
